﻿@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime
@inject IOptions<WebsiteOptions> WebsiteOption

<header class="navbar navbar-expand navbar-dark flex-column flex-md-row">
    <div class="header-img navbar-brand">
        <img src="_content/BootstrapBlazor.Shared/images/logo.png" />
        <span>Bootstrap Blazor</span>
    </div>
    <div class="navbar-nav-scroll">
        <ul class="navbar-nav bd-navbar-nav flex-row">
            <li class="nav-item">
                <a class="nav-link " href="index">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="introduction">文档</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="components">组件</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="@WebsiteOption.Value.ServerUrl" title="Server">server</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="@WebsiteOption.Value.WasmUrl" title="WebAssembly Client">wasm</a>
            </li>
        </ul>
    </div>
    <CultureChooser class="ml-md-auto" />
    <ul class="navbar-nav ml-3">
        <li class="nav-item">
            <a class="nav-link p-2" href="https://github.com/ArgoZhang/BootstrapBlazor"><img src="_content/BootstrapBlazor.Shared/images/git.svg" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link p-2" href="https://gitee.com/LongbowEnterprise/BootstrapBlazor"><img src="_content/BootstrapBlazor.Shared/images/gitee.svg" /></a>
        </li>
    </ul>
    <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" target="_blank" href="https://gitee.com/LongbowEnterprise/BootstrapBlazor/repository/archive/master.zip">下载</a>
</header>

@Body

@if (Installable)
{
    <div class="install-prompt">
        <div class="row">
            <div class="install-prompt-body col-10 col-offset-2 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
                <span class="ml-2">安装小程序</span>
                <button class="installButton btn btn-primary" @onclick="@InstallClicked">安装</button>
                <button class="cancelButton btn btn-danger" @onclick="@(() => Installable = false)">取消</button>
            </div>
        </div>
    </div>
}

@code
{
    static bool Installable = false;

    [NotNull]
    static Action? OnInstallable { get; set; }

    /// <summary>
    ///
    /// </summary>
    protected override void OnInitialized()
    {
        OnInstallable = () => InvokeAsync(StateHasChanged);
    }

    /// <summary>
    ///
    /// </summary>
    /// <returns></returns>
    [JSInvokable]
    public static Task PWAInstallable()
    {
        Installable = true;
        OnInstallable.Invoke();
        return Task.CompletedTask;
    }

    private async Task InstallClicked()
    {
        Installable = false;
        await JSRuntime.InvokeVoidAsync("BlazorPWA.installPWA");
    }
}
